<form class="form-horizontal">
    <legend>Legend</legend>
    <div class="row-fluid">
        <div class="span6">
            <div class="control-group">
                <label class="control-label" for="wineId">Id:</label>
                <div class="controls">
                    <input id="wineId" name="id" type="text" value="<%= id %>" disabled />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="name">Name:</label>
                <div class="controls">
                    <input type="text" id="name" name="name" value="<%= name %>" required/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="grapes">Grapes:</label>
                <div class="controls">
                    <input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="country">Country:</label>
                <div class="controls">
                    <input type="text" id="country" name="country" value="<%= country %>"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="region">Region:</label>
                <div class="controls">
                    <input type="text" id="region" name="region"  value="<%= region %>"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="year">Year:</label>
                <div class="controls">
                    <input type="text" id="year" name="year"  value="<%= year %>"/>
                </div>
            </div>
        </div>

        <div class="span6">
            <img height="300" src="pics/<%= picture %>" class="img-polaroid">
        </div>
    </div>
    
    <hr>
    
    <div class="row-fluid">
        <div class="span12">
            <div class="control-group">
                <label class="control-label" for="description">Notes</label>
                <div class="controls">
                    <textarea id="description" name="description" rows="10" class="span8"><%= description %></textarea>
                </div>
            </div>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade" id="mySaveModal" style="display: none;">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h3 id="myModalLabel">My Save Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

<h4>Popover in a modal</h4>
<p>This <a data-content="And here's some amazing content. It's very engaging. right?" class="btn popover-test" role="button" href="#" data-original-title="A Title">button</a> should trigger a popover on hover.</p>

<h4>Tooltips in a modal</h4>
<p><a class="tooltip-test" href="#" data-original-title="Tooltip">This link</a> and <a class="tooltip-test" href="#" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>

<hr>

<h4>Overflowing text to show optional scrollbar</h4>
<p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn">Close</button>
</div>
</div>
            
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade" id="myDeleteModal" style="display: none;">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h3 id="myModalLabel">My Delete Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

<h4>Popover in a modal</h4>
<p>This <a data-content="And here's some amazing content. It's very engaging. right?" class="btn popover-test" role="button" href="#" data-original-title="A Title">button</a> should trigger a popover on hover.</p>

<h4>Tooltips in a modal</h4>
<p><a class="tooltip-test" href="#" data-original-title="Tooltip">This link</a> and <a class="tooltip-test" href="#" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>

<hr>

<h4>Overflowing text to show optional scrollbar</h4>
<p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn">Close</button>
</div>
</div>
            <p>
                <button class="btn save" type="button" data-toggle="modal" data-target="#mySaveModal">Save</button>
                <button class="btn delete" type="button" data-toggle="modal" data-target="#myDeleteModal">Delete</button>
            </p>
        </div>
    </div>
</form>

    
    
     
